<template>
  <div>
    <el-drawer v-model="drawer" title="编辑项目参与人员" :with-header="true" size="60%">
      <el-form :inline="true" ref="searchForm" :model="searchFrom" class="demo-form-inline">
        <el-form-item label="姓名：">
          <el-input v-model="searchFrom.nickname" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadData()">
            <el-icon><Search /></el-icon>
            &nbsp; 查找
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="default" @click="refreshSearch()">
            <el-icon><RefreshLeft /></el-icon>
            &nbsp; 重置
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="add()">
            <el-icon><Plus /></el-icon>
            &nbsp; 添加
          </el-button>
        </el-form-item>
      </el-form>
      <el-table :data="showTableList" stripestyle="width: 100%" v-loading="loadTab">
        <el-table-column prop="nickname" label="姓名" />
        <el-table-column prop="department" label="部门" />
        <el-table-column prop="title" label="职务" />
        <el-table-column prop="username" label="电话" />
        <el-table-column prop="role" label="角色" width="120px" />
        <el-table-column label="状态" width="100px">
          <template #default="scope">
            <el-switch
              inline-prompt
              active-text="启用"
              inactive-text="禁用"
              active-value="在职"
              inactive-value="离职"
              v-model="scope.row.status"
              @change="edit(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template #default="scope">
            <el-button link type="primary" size="large" @click="openEdit(scope.row)">
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-drawer>
    <el-drawer v-model="editDrawer" title="编辑参与人员信息" :with-header="true" size="500px">
      <el-form ref="searchForm" label-width="100px" :model="searchFrom" class="demo-form-inline">
        <el-form-item label="姓名：">
          <el-input v-model="editForm.nickname" disabled />
        </el-form-item>
        <el-form-item label="项目内角色：">
          <el-select
            v-model="editForm.role"
            placeholder="请选择角色"
            style="width: 100%"
            filterable
          >
            <el-option
              v-for="ite in roleList"
              :key="ite.value"
              :label="ite.label"
              :value="ite.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDrawer = false">取消</el-button>
          <el-button type="primary" @click="edit(editForm)">确定</el-button>
        </span>
      </template>
    </el-drawer>
    <AddParticipantsDrawer ref="addParticipantsDrawer" @getData="loadData" />
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue'
  import { ElMessage } from 'element-plus'
  import AddParticipantsDrawer from '../../projectHome/components/addParticipantsDrawer.vue'
  import {
    getUserProjectByProjectNumber,
    postUserProjectUpdate,
  } from '@/api/controller/user-project-controller/index'
  import { getSysRoleList } from '@/api/controller/sys-user-controller/index'
  const drawer = ref(false)
  const editDrawer = ref(false)
  //打开人员列表
  const proId = ref()
  const show = async (data) => {
    formInline.projectNumber = data.projectNumber
    searchFrom.value.nickname = ''
    proId.value = data.id
    await loadData()
    drawer.value = true
  }
  const roleList = ref([])
  const editForm = ref({
    nickname: '',
    role: '',
  })
  //打开编辑抽屉
  const openEdit = async (row) => {
    let res = await getSysRoleList()
    roleList.value = res.data
    editForm.value = { ...row }
    editDrawer.value = true
  }
  //修改参与人员
  const edit = async (row) => {
    let res = await postUserProjectUpdate(row, { loading: true })
    if (res.code === 200) {
      await loadData()
      ElMessage.success('修改成功')
      editDrawer.value = false
    }
  }
  const addParticipantsDrawer = ref()
  const add = () => {
    addParticipantsDrawer.value.show(proId.value)
  }
  const formInline = reactive({
    projectNumber: '',
  })

  const searchFrom = ref({
    nickname: '',
  })
  //重置搜索
  const refreshSearch = () => {
    searchFrom.value.nickname = ''
    loadData()
  }
  //加载数据
  const showTableList = ref([])
  const loadTab = ref(true)
  const loadData = async () => {
    try {
      loadTab.value = true
      let res = await getUserProjectByProjectNumber(formInline)
      showTableList.value = res.data.filter((item) =>
        item.nickname.includes(searchFrom.value.nickname),
      )
    } finally {
      loadTab.value = false
    }
  }

  defineExpose({
    show,
  })
</script>
